<!-- 新建供应商 -->
<template>
    <a-drawer v-model:visible="vdata.visible"  :maskClosable="false" :title="vdata.isAdd ? '新增供应商' : '修改供应商'" width="40%">
      <a-form
        ref="formRef"
        :model="vdata.saveObject"
        layout="vertical"
        labelAlign="left"
        :rules="vdata.rules"
        :colon="false"
        :wrapper-col="{ span: 24 }"
        style="margin-top: 30px; margin-left: 20px"
      >
        <a-row>
          <a-col :span="11">
            <a-form-item label="供应商名称" name="supplierName" >
              <a-input v-model:value="vdata.saveObject['supplierName']" placeholder="供应商名称" />
            </a-form-item>
          </a-col>
          <a-col  :span="24">
            <a-form-item label="通信认证参数配置" name="authConfig" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['authConfig']" :placeholder="vdata.saveObject['authConfigPlaceholder']" :rows="4" />
          </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="供应商网址" name="websiteUrl" >
              <a-input  v-model:value="vdata.saveObject['websiteUrl']" placeholder="供应商网址" />
            </a-form-item>
          </a-col>
          <a-col :push="1" :span="11">
            <a-form-item label="状态" name="state" >
                <a-select v-model:value="vdata.saveObject['state']" :placeholder="'状态'">
                        <a-select-option :value="0">取消合作</a-select-option>
                        <a-select-option :value="1">正常合作</a-select-option>
                    </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="网址登录用户名" name="username" >
              <a-input  v-model:value="vdata.saveObject['username']" placeholder="供应商网址" />
            </a-form-item>
          </a-col>
          <a-col :push="1" :span="11">
            <a-form-item label="网址登录用户名密码" name="password" >
              <a-input  v-model:value="vdata.saveObject['password']" :placeholder="vdata.saveObject['passwordPlaceholder']" />  
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="onClose" >
          <close-outlined />
          取消
        </a-button>
        <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc" >
          <check-outlined />
          保存
        </a-button>
      </div>
    </a-drawer>
  </template>
  
  <script setup lang="ts">
  // import { req,API_URL_VIRTUAGOODS_SUPPLIER_ADD,API_URL_VIRTUAGOODS_SUPPLIER_UPDATE } from '@/api/manage'
  import {$apiAwardVirtualSupplierAdd,$apiAwardVirtualSupplierUpdate} from '@/api/externalGoods/supplier/index'
  import { reactive, ref, defineExpose, getCurrentInstance } from "vue";
  const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
  const formRef = ref();
  
  const props = defineProps(['callBackFunc'])
  
  const vdata:any = reactive({
    isAdd: false, // 新增OR修改
    visible: false,
    btnLoading: true,
    saveObject: {},
    rules: {
      supplierName: [{ required: true, message: "供应商名称不能为空", trigger: "blur" },],
      authConfig: [{ required: true, message: "通信认证参数不能为空", trigger: "blur" },],
      websiteUrl: [{ required: true, message: "供应商网址不能为空", trigger: "blur" },],
      username: [{ required: true, message: "网址登录用户名不能为空", trigger: "blur" },],
      password: [{ required: true, message: "网址登录密码不能为空", trigger: "blur" },],
    },
  });
  
  function handleOkFunc() {
    formRef.value.validate().then(() => {
      vdata.btnLoading = true
      if(vdata.isAdd){  // 新增
        
        $apiAwardVirtualSupplierAdd(vdata.saveObject).then(res=>{
          $infoBox.message.success('新增成功！')
          props.callBackFunc()
          onClose()
        }).finally(()=>{
          vdata.btnLoading = false
        })
      }else{  // 修改
        
        $apiAwardVirtualSupplierUpdate({ ...vdata.saveObject }).then(res=>{
          $infoBox.message.success('修改成功！')
          props.callBackFunc()
          onClose()
        }).finally(()=>{
          vdata.btnLoading = false
        })
      }
    }).catch(() => {});
  }
  
  function onClose() {
    vdata.visible = false;
  }
  
  function show(record) {
    vdata.isAdd = !record
    vdata.btnLoading = false;
    vdata.saveObject = {}
    if (formRef.value !== undefined) {
      formRef.value.resetFields();
    }

    if(!vdata.isAdd){ // 修改
      vdata.saveObject = { ...record }

    }
    vdata.visible = true;
  }
  
  defineExpose({
    show,
  });
  </script>